<!-- 顶栏 license by http://eleadmin.com -->
<template>
  <div :class="['ele-admin-header', {'ele-bg-primary': headStyle === 2}]">
    <!-- 左侧功能区 -->
    <div class="ele-admin-header-tool" v-if="showLeftTool" style="padding-left:0;-webkit-app-region:no-drag;">
      <!-- 自定义左侧功能 -->
      <slot name="left"/>
      <div v-if="showCollapse" class="ele-admin-header-tool-item" @click="toggleCollapse">
        <i :class="collapse ? 'el-icon-_unfold' : 'el-icon-_fold'"></i>
      </div>
      <div v-if="showRefresh" class="ele-admin-header-tool-item" @click="reloadPage">
        <i class="el-icon-refresh-right"></i>
      </div>
    </div>
    <!-- 自定义中间区域 -->
    <slot name="center"/>
    <!-- 顶部菜单区 -->
    <el-menu
      mode="horizontal"
      :default-active="active"
      :class="['ele-admin-header-nav', {'ele-menu-dark': headStyle !== 0}]"
      @mousewheel.native="scrollHeaderNav">
      <template v-for="menu in menus">
        <ele-pro-sidebar-item v-if="!menu.meta.hide" :key="menu.path" :item="menu"/>
      </template>
    </el-menu>
    <!-- 右侧功能区 -->
    <slot name="right"/>
  </div>
</template>

<script>
import EleProSidebarItem from 'ele-admin/packages/ele-pro-sidebar-item';

export default {
  name: 'MyHeader',
  components: {EleProSidebarItem},
  emits: [
    'logo-click',
    'reload-page',
    'toggle-collapse'
  ],
  props: {
    // 项目名
    projectName: String,
    // 面包屑导航数据
    levels: Array,
    // 顶栏菜单数据
    menus: Array,
    // 顶栏菜单选中
    active: String,
    // 顶栏风格
    headStyle: Number,
    // 是否折叠侧边栏
    collapse: Boolean,
    // 是否显示左边功能区
    showLeftTool: Boolean,
    // 是否显示折叠按钮
    showCollapse: Boolean,
    // 是否显示刷新按钮
    showRefresh: Boolean,
    // 是否显示面包屑导航
    showBreadcrumb: Boolean,
    // 面包屑导航分隔符
    breadcrumbSeparator: String
  },
  data() {
    return {
      // 导航滚动节流
      canScroll: true
    };
  },
  methods: {
    /* 折叠展开侧栏 */
    toggleCollapse() {
      this.$emit('toggle-collapse');
    },
    /* 刷新页面 */
    reloadPage() {
      this.$emit('reload-page');
    },
    /* logo点击事件 */
    onLogoClick() {
      this.$emit('logo-click');
    },
    /* 滚动顶栏导航 */
    scrollHeaderNav(e) {
      e.stopPropagation();
      e.preventDefault();
      if (!this.canScroll) {
        return;
      }
      this.canScroll = false;
      let elem = e.currentTarget;
      const delta = e.wheelDelta || e.detail;
      if (delta > 0) {
        elem.scrollLeft -= elem.clientWidth;
      } else if (delta < 0) {
        elem.scrollLeft += elem.clientWidth;
      }
      setTimeout(() => {
        this.canScroll = true;
      }, 300);
    }
  }
}
</script>
